<template>
  <div class="wp">
    <Layout :style="{padding: '16px'}">
      <Content :style="{padding: '16px', minHeight: '280px', background: '#fff'}">
        <div class="wp-header" ghost>
          <div class="wp-header-search">
            <span>搜索条件：</span>
            <Input v-model="search" placeholder="请输入工作计划名称..." style="width: 300px"></Input>
            <Button @click="toSearch"><Icon type="md-search" />搜索</Button>
          </div>
          <Button @click="addDrawer=true"><Icon type="md-add" />新增</Button>
          <Button @click="toRefresh"  id="aa"><Icon type="md-sync" />刷新</Button>
        </div>
        <div style="width: 100%;height: 72vh;overflow: hidden;margin-top: 1%">
        <div style="overflow-y:scroll;width: 101.5%;height: 100%;margin-right: -20px">
          <div class="wp-content" style="text-align: left">
            <Table :loading="loading" :height="666"  :columns="tb_columns" :data="workPlan_list" size="small">
              <template slot-scope="{ row }" slot="status">
                <span v-if="row.status==='进行中' && row.initiatorId===userId" class="status-warning">进行中</span>
                <span v-else-if="row.status==='进行中'" class="status-error">待处理</span>
                <span v-else-if="row.status==='已完成'" class="status-success">已完成</span>
              </template>
            </Table>
            <Page :total="workPlan_total" :current="workPlan_current_page" :page-size="workPlan_page_size" @on-change="onChange" @on-page-size-change="onPageSizeChange" show-total show-sizer size="small" style="float:right;margin-top:12px"/>
          </div>
        </div>
      </div>
      </Content>
    </Layout>
    <Drawer title="新增工作计划" :closable="false" v-model="addDrawer" width="40" :mask-closable="false">
      <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="140">
        <FormItem label="工作名称：" prop="workName">
          <Input v-model="addForm.workName" placeholder="请输入工作名称..."></Input>
        </FormItem>
        <FormItem label="工作开始时间：">
          <DatePicker  type="date" v-model="addForm.workTime" placeholder="请选择工作开始时间..." style="width: 100%"></DatePicker >
        </FormItem>
        <FormItem label="工作完成时限：">
          <Input  v-model="addForm.processLimite" placeholder="请输入工作完成时限..."></Input >
        </FormItem>
        <FormItem label="工作地点：" prop="address">
          <Input v-model="addForm.address" placeholder="请输入工作地点..."></Input>
        </FormItem>
        <FormItem label="工作事宜：" prop="matter">
          <Input type="textarea" :rows="8" v-model="addForm.matter" placeholder="请输入工作事宜..."></Input>
        </FormItem>
        <FormItem label="相关人员：">
          <Select v-model="addForm.relatedPersonnel" multiple placeholder="请选择工作接收的相关人员...">
            <Option v-for="(item,key) in staff_list" :key="key" :value="item.id+','+item.name">{{item.name}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" @click="handleSubmit('addForm')">提交</Button>
        <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
      </div>
    </Drawer>
    <Drawer title="提交工作" :closable="false" v-model="submitDrawer" width="40" :mask-closable="false">
      <Form ref="addForm" :model="addForm" :rules="addRuleVal" :label-width="100">
        <Row>
          <Col span="20">
            <div style="padding-bottom: 24px;width:100%;margin-left: 20%"  class="step-s">
              <Steps :current="step"  direction="vertical">
                <Step title="工作下发" :content="c1"></Step>
                <Step title="进行中" :content="c2"></Step>
                <Step title="工作完结" :content="c3"></Step>
              </Steps>
            </div>
          </Col>
        </Row>
        <FormItem label="工作提交描述：" prop="operationDesc">
          <Input type="textarea" :rows="8" v-model="addForm.operationDesc" placeholder="请输入工作提交描述..."></Input>
        </FormItem>
      </Form>
      <div class="demo-drawer-footer">
        <Button type="primary" @click="submit('addForm')">提交</Button>
        <Button @click="handleReset('addForm')" style="margin-left: 8px">取消</Button>
      </div>
    </Drawer>
    <Drawer title="工作情况" v-model="querytDrawer" width="20" >
      <div style="width:100%" class="step-s">
          <Steps :current="step"  direction="vertical">
            <Step title="工作下发" :content="c1"></Step>
            <Step title="进行中" :content="c2"></Step>
            <Step title="工作完结" :content="c3"></Step>
          </Steps>
      </div>
    </Drawer>
  </div>
</template>

<script>
  import {toGet,toPost} from "../../utils/MyAxios";
  import {mapActions,mapGetters} from 'vuex';
    export default {
        name: "index",
        data() {
            return {
              step:1,
              c1:'',
              c2:'',
              c3:'',
              userId:localStorage.getItem('userId'),
              loading:false,
              search:'',
              querytDrawer:false,
              submitDrawer:false,
              addForm:{},
              addRuleVal:{
                workName: [
                  { required: true, message: '请输入工作名称', trigger: 'blur' }
                ],
                address: [
                  { required: true, message: '请输入工作地点', trigger: 'blur' }
                ],
                matter: [
                  { required: true, message: '请输入工作事宜', trigger: 'blur' }
                ]
              },
              tb_columns: [
                {
                  title: '名称',
                  key: 'workName',
                  align: 'center'
                },
                {
                  title: '开始时间',
                  key: 'workTime',
                  align: 'center'
                },
                {
                  title: '处理时限',
                  key: 'processLimite',
                  align: 'center'
                },
                {
                  title: '工作地点',
                  key: 'address',
                  align: 'center'
                },
                {
                  title: '工作事宜',
                  key: 'matter',
                  align: 'center'
                },
                {
                  title: '状态',
                  align: 'center',
                  slot: 'status',
                },
                {
                  title: '发起人',
                  key: 'initiator',
                  align: 'center'
                },
                {
                  title: '相关人员',
                  key: 'relatedPersonnel',
                  align: 'center'
                },
                {
                  title: '操作时间',
                  key: 'recordTime',
                  align: 'center'
                },
                {
                  title: '操作说明',
                  key: 'operationDesc',
                  align: 'center'
                },
                {
                  title: '操作',
                  align: 'center',
                  render: (h, params) => {
                    if(params.row.status==='进行中' && params.row.initiatorId===localStorage.getItem('userId')){
                      return h('div', [
                        h('Button', {
                          props: {
                            icon: 'md-search',
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.querytDrawer=true;
                              this.step=1;
                              this.c1=params.row.workTime+'由自己新建工作计划并下发至员工';
                              this.c2='员工'+params.row.relatedPersonnel+'正在努力处理中';
                              this.c3='';
                            }
                          }
                        }),
                      ]);
                    }else if(params.row.initiatorId!==localStorage.getItem('userId')){
                      return h('div', [
                        h('Button', {
                          props: {
                            icon: 'md-arrow-round-up',
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.step=1;
                              this.addForm.id=params.row.id;
                              this.submitDrawer=true
                            }
                          }
                        }),
                      ]);
                    }else{
                      return h('div', [
                        h('Button', {
                          props: {
                            icon: 'md-search',
                          },
                          style: {
                            color: 'black',
                          },
                          on: {
                            click: () => {
                              this.querytDrawer=true;
                              this.step=2;
                              this.c1=params.row.workTime+'由自己新建工作计划并下发至员工';
                              this.c2='员工'+params.row.relatedPersonnel+'正在努力处理中';
                              this.c3='员工'+params.row.relatedPersonnel+'完成工作，并提交。';
                            }
                          }
                        }),
                      ]);
                    }
                  }
                }
              ],
              addDrawer:false,
            }
        },
        computed: {
          ...mapGetters(['workPlan_list','workPlan_total','workPlan_current_page','workPlan_page_size','staff_list']),
        },
        methods: {
          ...mapActions(['getWorkPlanList','getStaffList']),
          handleSubmit (name) {
            this.$refs[name].validate((valid) => {
              if (valid) {
                if(this.addForm.workTime){
                  let date = new Date(this.addForm.workTime);
                  this.addForm.workTime=date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
                }
                if(this.addForm.relatedPersonnel){
                  let a1=[],a2=[];
                  this.addForm.relatedPersonnel.forEach(item=>{
                    a1.push(item.split(',')[0]);
                    a2.push(item.split(',')[1]);
                  });
                  this.addForm.recipientId=a1.join(',');
                  this.addForm.relatedPersonnel=a2.join(',');
                }
                let params = {
                  initiatorId:localStorage.getItem('userId'),
                  initiator:localStorage.getItem('nickname'),
                  workName:this.addForm.workName,
                  workTime:this.addForm.workTime,
                  processLimite:this.addForm.processLimite,
                  address:this.addForm.address,
                  matter:this.addForm.matter,
                  recipientId:this.addForm.recipientId,
                  relatedPersonnel:this.addForm.relatedPersonnel,
                };
                toPost('/work-plan/wp/add',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '新工作下发成功'
                      });
                      this.$refs[name].resetFields();
                      this.toRefresh();
                      this.addDrawer=false;
                    }else{
                      this.$Notice.error({
                        title: '新工作下发失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  })
              }
            });
          },
          handleReset (name) {
            this.addDrawer=false;
            this.submitDrawer=false;
            this.$refs[name].resetFields();
          },
          onChange(currentPage){
            this.getWorkPlanList({
              'userId':localStorage.getItem('userId'),
              'search':this.search,
              'currentPage':currentPage*1,
              'pageSize':this.workPlan_page_size
            })
          },
          onPageSizeChange(pageSize){
            this.getWorkPlanList({
              'userId':localStorage.getItem('userId'),
              'search':this.search,
              'currentPage':this.workPlan_current_page,
              'pageSize':pageSize*1
            })
          },
          jump(e){
            this.$router.push(e);
          },
          toRefresh(){
            this.getWorkPlanList({
              'userId':localStorage.getItem('userId'),
              'search':this.search,
              'currentPage':this.workPlan_current_page,
              'pageSize':this.workPlan_page_size
            })
          },
          toSearch(){
            this.getWorkPlanList({
              'userId':localStorage.getItem('userId'),
              'search':this.search,
              'currentPage':this.workPlan_current_page,
              'pageSize':this.workPlan_page_size
            })
          },
          submit(name){
            this.$refs[name].validate((valid) => {
              if (valid) {
                let params = {
                  id:this.addForm.id,
                  operationDesc:this.addForm.operationDesc,
                };
                toPost('/work-plan/wp/submit',params)
                  .then(res=>{
                    if (res.resultCode === 0) {
                      this.$Notice.success({
                        title: '工作提交成功'
                      });
                      this.$refs[name].resetFields();
                      this.toRefresh();
                      this.submitDrawer=false;
                    }else{
                      this.$Notice.error({
                        title: '工作提交失败',
                        desc: '服务器发生未知错误'
                      })
                    }
                  })
              }
            });
          },
        },
        mounted() {
          this.getWorkPlanList({
            'userId':localStorage.getItem('userId'),
            'search':this.search,
            'currentPage':this.workPlan_current_page,
            'pageSize':this.workPlan_page_size
          });
          this.getStaffList({
            'search':'',
            'currentPage':1,
            'pageSize':999
          });
        }
    }
</script>

<style scoped>


</style>
